<template>
    <div class="page">
        <div class="order">
            <div class="order-title">
                <div class="order-title-left">
                    <span class="orderNumber" >订单编号：{{item.order_no}}</span>
                </div>
                <div class="order-title-right" @click="quxiaodingdan">取消订单</div>
            </div>
            <div class="orderContent" v-for="li in item.goods_detail" :key="li.id">
                <div class="orderContent-left">
                    <img :src="li.img" alt="">
                </div>
                <div class="orderContent-right">
                    <strong class="orderContent-right-top">{{li.name}}</strong>
                    <span class="orderContent-right-middle">黑色现货:L</span>
                    <div class="orderContent-right-bottom">
                        <div class="price">
                            <span>￥{{li.real_price}}</span>
                            <del>￥{{li.goods_price}}</del>
                        </div>
                        <div>x{{li.goods_nums}}</div>
                    </div>
                </div>
            </div>
            <div class="order-price">
                <span @click="tuikuan">申请退款</span>
                <span>商订单金额 : {{item.real_amount}}</span>
            </div>
            <div class="orderBottom">
                <div class="orderBottom-left">
                    <!-- <img src="@/assets/微信.png" alt="">
                    <img src="@/assets/微信.png" alt=""> -->
                </div>
                <div class="orderBottom-right">
                    <span>催发货</span>
                    <span>修改地址</span>
                </div>
            </div>
        </div>
        <div class="null"></div>
    </div>
</template>
<script>
import contDown from "@/components/daojishi/daojishi";

export default {
    components: { contDown },
    props: {
        item:Object
    },
    methods:{
        changeinput(e){
            this.item.checked=e,
            this.$emit("toparent",{
                orderid:this.item.order_no,
                is_add:e
            })
        },
        // 去支付页面
        topay(){
            this.$router.push({
              name:'choosePay',
              params:{
                gid: this.item.order_no,
                num: this.item.real_amount
              }
            })
        },
        quxiaodingdan(){
            this.$dialog.confirm({
                title: '提示',
                message: '确定要取消此订单吗？'
                }).then(() => {
                // on confirm
                }).catch(() => {
                // on cancel
            });  
        },
        // 申请退款
        tuikuan(){
            this.$dialog.confirm({
                title: '提示',
                message: '确认申请退款?'
                }).then(() => {
                    this.request({
                        url: '?controller=theapi&action=refunds_update',
                        params: {
                            order_goods_id:this.item.goods_detail[0].goods_id,
                            order_id:this.item.id ,
                            content:'1',
                            type:'refunds'
                        }
                    }).then(res=>{
                        console.log(res)
                       
                    })                    
                }).catch(() => {
            });
        }
    },

    mounted(){

    }
};
</script>
<style scoped>
.order {
    padding: 0.25rem;
}
.order-title {
    display: flex;
    justify-content: space-between;
}
.order-title-left {
    display: flex;
    align-items: center;
}
.orderNumber {
    margin-left: 0.2rem;
}
.orderContent-left {
    width: 2.28rem;
    height: 2.28rem;
    border: 1px solid #e6e6e6;
    display: flex;
    justify-content: center;
    align-items: center;
}
.orderContent-left img{
    width: 100%;
    height: 100%;
}
.orderContent {
    display: flex;
    justify-content: space-between;
    margin-top: 0.2rem;
    padding: 0.2rem 0;
    border: 1px solid #e6e6ee;
    border-left: none;
    border-right: none;
}
.orderContent-right {
    margin-left: 0.25rem;
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.orderContent-right-top {
    font-size: 0.3rem;
}
.orderContent-right-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.price span {
    font-size: 0.36rem;
    color: #f52e67;
}
.price del {
    font-size: 0.26rem;
    color: #b3b5b8;
}
.order-price {

    display: flex;
    justify-content: space-between;
    font-size: 0.26rem;
    margin-top: 0.25rem;
}
.order-price span:nth-child(1){
    color: #FF663D
}
.orderBottom {
    display: flex;
    justify-content: space-between;
    margin-top: 0.3rem;
}
.contdown {
    font-size: 0.28rem;
    color: #ff663d;
}
.null {
    height: 0.2rem;
    background: #f5f6f7;
}
.orderContent-right-middle {
    background: #f5f5f6;
    width: 1.5rem;
    color: #b9babd;
    padding: 2px;
}
    .orderBottom{display: flex;justify-content: space-between;margin-top: 0.3rem;align-items: center;}
    .orderBottom-left img{width: 0.6rem;height: 0.6rem;border-radius:50%; }
    .orderBottom-right span{color: #F52E67;font-size: 0.28rem;}
    .orderBottom-right span:nth-child(1){margin-right: 0.2rem;}
</style>


